<template>
	<div>
		<SearchView></SearchView>
		<div></div>
		<div class="content">
			<div class="item" v-for="(item, index) in list" :key="index">
				<van-image width="86" height="86" radius="5px" :src="item.backgroundImage" />
				<span class="name">{{ item.title }}</span>
				<!-- <van-count-down   :time="" format="HH : mm : ss" /> -->
				<van-count-down v-if="item.timestamp" :time="time - item.timestamp">
					<template #default="timeData">
						<span class="block">{{ timeData.hours }}</span>
						<span class="colon">:</span>
						<span class="block">{{ timeData.minutes }}</span>
						<span class="colon">:</span>
						<span class="block">{{ timeData.seconds }}</span>
					</template>
				</van-count-down>
			</div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<van-image width="100%" height="45" src="/img/guess_like.webp" />
		<div class="like">
			<LikeComponents class="like-item" v-for="(item, index) in likeList" :item="item" :key="index" />
			<div style="width: 181px"></div>
			<div style="width: 181px"></div>
		</div>
	</div>
</template>

<script>
import SearchView from "../../components/SearchView.vue";
import LikeComponents from "../../components/shop/LikeComponents.vue";

const throttle = (fn, time) => {
	let timer = null;
	return (...args) => {
		if (!timer) {
			timer = setTimeout(() => {
				timer = null;
				fn.apply(this, args);
			}, time);
		}
	};
};

export default {
	name: "ShopView",

	components: {LikeComponents, SearchView},
	data() {
		return {
			list: [],
			likeList: [],
			page: 1,
			fn: throttle(this.onScroll, 400),
		};
	},

	computed: {
		time() {
			let time = new Date();
			return Math.round(time.getTime() / 1000);
		},
	},

	mounted() {
		this.getList();
		this.getLike();
		window.addEventListener("scroll", this.fn, true);
	},

	methods: {
		async getList() {
			let url = `https://apis.netstart.cn/mogujie/shopNav.json`;
			let {data} = await this.$axios(url);
			this.list = data;
		},
		async getLike() {
			let url = `https://apis.netstart.cn/mogujie/goods/personalized`;
			let {data} = await this.$axios(url, {params: {page: this.page}});
			if (data.data?.wall?.docs) {
				this.likeList = [...this.likeList, ...data.data?.wall?.docs];
			}
			console.log("猜你喜欢", this.likeList);
		},
		onScroll() {
			let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			//变量windowHeight是可视区的高度
			let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
			//变量scrollHeight是滚动条的总高度
			let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
			if (Math.ceil(scrollTop) + windowHeight >= scrollHeight) {
				this.page++;
				console.log(this.page);
				this.getLike();
			}
		},
	},
	beforeRouteLeave(to, from, next) {
		//不能用销毁钩子 用了keepalive页面没有触发销毁钩子函数
		window.removeEventListener("scroll", this.fn, true);
		next();
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	height: 480px;
	.item {
		margin-right: 10px;
		position: relative;
		height: 120px;
		.name {
			position: absolute;
			bottom: 39px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 15px;
			white-space: nowrap;
			color: #fff;
			text-align: center;
			font-weight: 700;
		}
		.van-count-down {
			position: absolute;
			bottom: 57px;
			white-space: nowrap;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			.colon {
				display: inline-block;
				margin: 0 4px;
				color: #fff;
				font-weight: 700;
			}
			.block {
				display: inline-block;
				width: 15px;
				height: 15px;
				color: #fff;
				font-size: 12px;
				text-align: center;
				font-weight: 700;
				background-color: #000;
				line-height: 15px;
			}
		}
	}
}
.like {
	margin-top: -5px;
	background-color: #efefef;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.like-item {
		margin-top: 10px;
	}
}
</style>
